<script>
export default {
  name: "search",
  data() {
    return {
      // 表单数据
      selectedRegion: ['江苏省', '苏州市', '虎丘区'], // 选中的地区
      selectedPosition: '岗位B', // 选中的岗位
      selectedJobCode: '', // 职位代码
      userName: '', // 姓名
      wechatId: '', // 微信号
      uploadedImages: [], // 已上传的图片列表
      sampleImages: [
        'https://example.com/sample1.jpg',
        'https://example.com/sample2.jpg',
        'https://example.com/sample3.jpg'
      ], // 示例图片列表

      // 弹窗控制
      showRegion: false,
      showPosition: false,
      showJobCode: false,

      // 地区数据
      provinces: [
        { code: '000000', name: '总局' },
        { code: '320000', name: '江苏' },
        { code: '330000', name: '浙江' },
        { code: '310000', name: '上海' },
        { code: '110000', name: '北京' }
      ],
      cities: [
        { code: '000000', name: '省局', parent: '000000' },
        { code: '320500', name: '苏州市', parent: '320000' },
        { code: '320600', name: '南通市', parent: '320000' },
        { code: '320400', name: '常州市', parent: '320000' },
        { code: '320200', name: '无锡市', parent: '320000' },
        { code: '320700', name: '连云港市', parent: '320000' },
        { code: '330100', name: '杭州市', parent: '330000' },
        { code: '330200', name: '宁波市', parent: '330000' }
      ],
      districts: [
        { code: '000000', name: '市局', parent: '000000' },
        { code: '320505', name: '虎丘区', parent: '320500' },
        { code: '320506', name: '工业园区', parent: '320500' },
        { code: '320507', name: '高新区', parent: '320500' },
        { code: '320581', name: '昆山市', parent: '320500' }
      ],

      // 岗位数据
      positions: [
        { code: 'A', name: '岗位A' },
        { code: 'B', name: '岗位B' },
        { code: 'C', name: '岗位C' },
        { code: 'D', name: '岗位D' }
      ],

      // 职位代码数据
      jobCodes: [
        { code: '001', name: '职位代码001' },
        { code: '002', name: '职位代码002' },
        { code: '003', name: '职位代码003' },
        { code: '004', name: '职位代码004' },
        { code: '005', name: '职位代码005' }
      ],

      // 选择状态 - 改为单选
      selectedProvince: '320000',
      selectedCity: '320500',
      selectedDistrict: '320505',
      tempSelectedProvince: '',
      tempSelectedCity: '',
      tempSelectedDistrict: ''
    }
  },
  mounted() {
    // 初始化地区显示
    this.updateSelectedRegion();
  },
  computed: {
    // 过滤后的城市列表
    filteredCities() {
      // 如果没有选择省份，返回空数组
      if (!this.tempSelectedProvince) {
        return [];
      }
      // 如果选择了总局，显示所有城市
      if (this.tempSelectedProvince === '000000') {
        return this.cities;
      }
      // 否则只显示选中省份下的城市
      return this.cities.filter(city => 
        city.parent === this.tempSelectedProvince
      );
    },
    // 过滤后的区县列表
    filteredDistricts() {
      // 如果没有选择城市，返回空数组
      if (!this.tempSelectedCity) {
        return [];
      }
      // 如果选择了省局，显示所有区县
      if (this.tempSelectedCity === '000000') {
        return this.districts;
      }
      // 否则只显示选中城市下的区县
      return this.districts.filter(district => 
        district.parent === this.tempSelectedCity
      );
    }
  },
  methods: {
    // 显示地区选择弹窗
    showRegionPopup() {
      // 初始化临时选择状态
      this.tempSelectedProvince = this.selectedProvince;
      this.tempSelectedCity = this.selectedCity;
      this.tempSelectedDistrict = this.selectedDistrict;
      this.showRegion = true;
    },

    // 选择省份
    selectProvince(province) {
      this.tempSelectedProvince = province.code;
      // 清除下级选择，实现联动效果
      this.tempSelectedCity = '';
      this.tempSelectedDistrict = '';
    },

    // 选择城市
    selectCity(city) {
      this.tempSelectedCity = city.code;
      // 清除下级选择，实现联动效果
      this.tempSelectedDistrict = '';
    },

    // 选择区县
    selectDistrict(district) {
      this.tempSelectedDistrict = district.code;
    },

    // 确认地区选择
    confirmRegion() {
      this.selectedProvince = this.tempSelectedProvince;
      this.selectedCity = this.tempSelectedCity;
      this.selectedDistrict = this.tempSelectedDistrict;
      this.updateSelectedRegion();
      this.showRegion = false;
    },

    // 取消地区选择
    cancelRegion() {
      this.showRegion = false;
    },

    // 更新选中的地区显示
    updateSelectedRegion() {
      this.selectedRegion = [];
      
      // 添加省份（包括总局）
      const province = this.provinces.find(p => p.code === this.selectedProvince);
      if (province) {
        this.selectedRegion.push(province.name);
      }
      
      // 添加城市（包括省局）
      const city = this.cities.find(c => c.code === this.selectedCity);
      if (city) {
        this.selectedRegion.push(city.name);
      }
      
      // 添加区县（包括市局）
      const district = this.districts.find(d => d.code === this.selectedDistrict);
      if (district) {
        this.selectedRegion.push(district.name);
      }
    },

    // 获取地区显示文本
    getRegionText() {
      return this.selectedRegion.join(' ');
    },

    // 显示岗位选择弹窗
    showPositionPopup() {
      this.showPosition = true;
    },

    // 选择岗位
    selectPosition(position) {
      this.selectedPosition = position.name;
      this.showPosition = false;
    },

    // 显示是否选择弹窗
    showYesNoPopup(type, title) {
      this.currentYesNoType = type;
      this.currentYesNoTitle = title;
      this.showYesNo = true;
    },

    // 显示职位代码选择弹窗
    showJobCodePopup() {
      this.showJobCode = true;
    },

    // 选择职位代码
    selectJobCode(jobCode) {
      this.selectedJobCode = jobCode.code;
      this.showJobCode = false;
    },

    // 选择图片
    chooseImage() {
      if (this.uploadedImages.length >= 6) {
        uni.showToast({
          title: '最多只能上传6张图片',
          icon: 'none'
        });
        return;
      }

      uni.chooseImage({
        count: 6 - this.uploadedImages.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadImages(res.tempFilePaths);
        },
        fail: (err) => {
          console.log('选择图片失败', err);
        }
      });
    },

    // 上传图片
    uploadImages(filePaths) {
      uni.showLoading({
        title: '上传中...'
      });

      const uploadPromises = filePaths.map(filePath => {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: this.$api.uploadFile,
            filePath: filePath,
            name: 'file',
            success: (uploadFileRes) => {
              try {
                let data = JSON.parse(uploadFileRes.data);
                const url = data.data.url;
                resolve(url);
                uni.showToast({
                  title: '上传成功',
                  icon: 'success'
                });
              } catch (error) {
                reject(error);
              }
            },
            fail: (err) => {
              console.log('上传失败', err);
              uni.showToast({
                title: '上传失败',
                icon: 'none'
              });
              reject(err);
            },
            complete: () => {
              uni.hideLoading();
            }
          });
        });
      });

      Promise.all(uploadPromises)
        .then(urls => {
          this.uploadedImages = [...this.uploadedImages, ...urls];
        })
        .catch(error => {
          console.log('批量上传失败', error);
        });
    },

    // 删除图片
    deleteImage(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            this.uploadedImages.splice(index, 1);
          }
        }
      });
    },

    // 预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.uploadedImages
      });
    },

    // 预览示例图片
    previewSampleImages() {
      uni.previewImage({
        current: 0,
        urls: this.sampleImages
      });
    },

    // 查询往年
    queryPreviousYears() {
      this.submitForm('previous');
    },

    // 查询当年
    queryCurrentYear() {
      this.submitForm('current');
    },

    // 提交表单
    submitForm(type) {
      // 验证表单
      if (this.selectedRegion.length === 0) {
        uni.showToast({
          title: '请选择地区',
          icon: 'none'
        });
        return;
      }

      if (!this.selectedPosition) {
        uni.showToast({
          title: '请选择岗位',
          icon: 'none'
        });
        return;
      }

      if (!this.selectedJobCode) {
        uni.showToast({
          title: '请选择职位代码',
          icon: 'none'
        });
        return;
      }

      if (!this.userName.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return;
      }

      if (!this.wechatId.trim()) {
        uni.showToast({
          title: '请输入微信号',
          icon: 'none'
        });
        return;
      }

      const formData = {
        regions: this.selectedRegion,
        position: this.selectedPosition,
        jobCode: this.selectedJobCode,
        userName: this.userName,
        wechatId: this.wechatId,
        images: this.uploadedImages,
        queryType: type,
        selectedProvince: this.selectedProvince,
        selectedCity: this.selectedCity,
        selectedDistrict: this.selectedDistrict
      };
    }
  }
}
</script>

<template>
  <view class="page-container">
    <view class="search-page">
      <!-- 表单卡片 -->
      <view class="form-card">
		
	<!-- 报名岗位 -->
	<view class="form-item" @click="showPositionPopup">
	  <text class="form-label">报名岗位</text>
	  <view class="form-value">
		<text class="value-text" v-if="selectedPosition">{{ selectedPosition }}</text>
		<text class="placeholder-text" v-else>请选择岗位</text>
		<image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
	  </view>
	</view>
	  <!-- 提示文字 -->
	  <view class="form-hint">
		<text class="hint-text">非财经岗请咨询后再报名</text>
	  </view>
      <!-- 报名岗位所在地区 -->
      <view class="form-item" @click="showRegionPopup">
        <text class="form-label">报名岗位所在地区</text>
        <view class="form-value">
          <text class="value-text" v-if="selectedRegion.length > 0">{{ getRegionText() }}</text>
          <text class="placeholder-text" v-else>请选择地区</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>


      <!-- 职位代码 -->
      <view class="form-item" @click="showJobCodePopup">
        <text class="form-label">职位代码</text>
        <view class="form-value">
          <text class="value-text" v-if="selectedJobCode">{{ selectedJobCode }}</text>
          <text class="placeholder-text" v-else>请选择职位代码</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>
 <!-- 姓名 -->
      <view class="form-item">
        <text class="form-label">课程内容</text>
        <view class="form-value input-value"  style="padding-top:0;padding-bottom: 0">
         自我介绍修改+结构化+专业课+英语+模拟练习
        </view>
      </view>
      <!-- 姓名 -->
      <view class="form-item">
        <text class="form-label">姓名</text>
        <view class="form-value input-value"  style="padding-top:0;padding-bottom: 0">
          <input 
            class="input-field" 
            v-model="userName" 
            placeholder="请输入姓名"
            maxlength="20"
          />
        </view>
      </view>

        <!-- 承诺提示 -->
        <view class="promise-tips">
          <text class="promise-text">仅用于核对信息与岗位保护，对隐私安全负责</text>
        </view>
      <!-- 微信号 -->
      <view class="form-item">
        <text class="form-label">微信号</text>
        <view class="form-value input-value"  style="padding-top:0;padding-bottom: 0">
          <input 
            class="input-field" 
            v-model="wechatId" 
            placeholder="请输入微信号"
            maxlength="30"
          />
        </view>
      </view>

      <!-- 上传图片 -->
      <view class="form-item">
        <text class="form-label">上传图片</text>
        <view class="form-hint">
          <text class="hint-text">最多可上传6张图片</text>
        </view>
        <view class="image-upload-container">
          <!-- 已上传的图片 -->
          <view 
            v-for="(image, index) in uploadedImages" 
            :key="index"
            class="image-item"
          >
            <image 
              :src="image" 
              class="uploaded-image" 
              mode="aspectFill"
              @click="previewImage(index)"
            />
            <view class="delete-btn" @click="deleteImage(index)">
              <text class="delete-icon">×</text>
            </view>
          </view>
          
          <!-- 添加图片按钮 -->
          <view 
            v-if="uploadedImages.length < 6"
            class="add-image-btn" 
            @click="chooseImage"
          >
            <text class="add-icon">+</text>
            <text class="add-text">添加图片</text>
          </view>
        </view>
        
        <!-- 查看示例图片 -->
        <view class="sample-image-link" @click="previewSampleImages">
          <text class="sample-text">查看示例图片</text>
        </view>
        
        <!-- 承诺提示 -->
        <view class="promise-tips" style="margin-top: 16rpx;">
          <text class="promise-text">本单位承诺：考生所填报信息仅作课程报名的岗位保护使用，我单位将严格保障考生信息安全，并承担当相关法律责任</text>
        </view>
      </view>
    </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </view>

    <!-- 固定在底部的提交按钮 -->
    <view class="fixed-bottom">
      <view class="action-buttons">
        <view class="btn btn-primary" @click="queryCurrentYear">
          <text class="btn-text">提交</text>
        </view>
      </view>
    </view>

    <!-- 地区选择弹窗 -->
    <u-popup v-model="showRegion" mode="bottom" border-radius="16" height="70%">
      <view class="region-popup">
        <view class="popup-header">
          <text class="popup-title">选择地区</text>
        </view>
        
        <view class="region-columns">
          <!-- 第一级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(province, index) in provinces" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedProvince === province.code }"
                @click="selectProvince(province)"
              >
                <text class="item-text">{{ province.name }}</text>
                <image 
                  v-if="tempSelectedProvince === province.code"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>

          <!-- 第二级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(city, index) in filteredCities" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedCity === city.code }"
                @click="selectCity(city)"
              >
                <text class="item-text">{{ city.name }}</text>
                <image 
                  v-if="tempSelectedCity === city.code"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>

          <!-- 第三级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(district, index) in filteredDistricts" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedDistrict === district.code }"
                @click="selectDistrict(district)"
              >
                <text class="item-text">{{ district.name }}</text>
                <image 
                  v-if="tempSelectedDistrict === district.code"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="popup-footer">
          <view class="footer-btn cancel-btn" @click="cancelRegion">
            <text class="footer-btn-text">取消</text>
          </view>
          <view class="footer-btn confirm-btn" @click="confirmRegion">
            <text class="footer-btn-text">确定</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 岗位选择弹窗 -->
    <u-popup v-model="showPosition" mode="bottom" border-radius="16" height="40%">
      <view class="position-popup">
        <view class="popup-header">
          <text class="popup-title">选择岗位</text>
        </view>
        <scroll-view class="position-list" scroll-y="true">
          <view 
            v-for="(position, index) in positions" 
            :key="index"
            class="position-item"
            @click="selectPosition(position)"
          >
            <text class="position-text">{{ position.name }}</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 职位代码选择弹窗 -->
    <u-popup v-model="showJobCode" mode="bottom" border-radius="16" height="50%">
      <view class="jobcode-popup">
        <view class="popup-header">
          <text class="popup-title">选择职位代码</text>
        </view>
        <scroll-view class="jobcode-list" scroll-y="true">
          <view 
            v-for="(jobCode, index) in jobCodes" 
            :key="index"
            class="jobcode-item"
            @click="selectJobCode(jobCode)"
          >
            <text class="jobcode-code">{{ jobCode.code }}</text>
            <text class="jobcode-name">{{ jobCode.name }}</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-page {
  padding: 32rpx 24rpx;
}

.form-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 32rpx;

  .form-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    display: block;
  }

  .form-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 24rpx 20rpx;
    min-height: 80rpx;

    .value-text {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }

    .placeholder-text {
      font-size: 28rpx;
      color: #999;
      flex: 1;
    }

    .arrow-icon {
      width: 24rpx;
      height: 24rpx;
      flex-shrink: 0;
    }
  }

  // 输入框样式
  &.input-value {padding: 0;
    background-color: transparent;
  }

  .input-field {
    flex: 1;
    height: 80rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    border: none;
    outline: none;

    &::placeholder {
      color: #999;
    }
  }
}

.form-hint {
  margin-bottom: 32rpx;

  .hint-text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.4;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

// 底部占位
.bottom-placeholder {
  height: 120rpx;
}

// 固定在底部的按钮
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 24rpx;
  padding-bottom: 60rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
}

.btn {
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.btn-secondary {
    background-color: #333;
  }

  &.btn-primary {
    background-color: #539DF3;
  }

  .btn-text {
    font-size: 32rpx;
    color: #fff;
  }
}

// 地区选择弹窗
.region-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.popup-header {
  padding: 32rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;

  .popup-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
}

.region-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.region-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1rpx solid #f0f0f0;

  &:last-child {
    border-right: none;
  }
}

.column-header {
  padding: 24rpx 16rpx;
  background-color: #f8f8f8;
  border-bottom: 1rpx solid #f0f0f0;

  .header-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
}

.column-list {
  flex: 1;
  padding: 0 16rpx;
  
  // 空状态样式
  &:empty::after {
    content: '请先选择上级';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.region-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
  border-radius: 8rpx;
  margin: 4rpx 0;
  transition: all 0.2s ease;
  
  &.selected {
    background-color: #539DF3;
    margin: 8rpx 0;

    .item-text {
      color: #fff;
    }
  }

  &:not(.selected):hover {
    background-color: #f5f5f5;
  }

  &:active {
    transform: scale(0.98);
  }

  .item-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }

  .check-icon {
    width: 24rpx;
    height: 24rpx;
    flex-shrink: 0;
  }
}

.popup-footer {
  display: flex;
  padding: 24rpx 32rpx 62rpx 32rpx;
  gap: 24rpx;
  border-top: 1rpx solid #f0f0f0;
  background-color: #fff;
}

.footer-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.cancel-btn {
    background-color: #f5f5f5;
  }

  &.confirm-btn {
    color: #fff;
    background-color: #539DF3;
  }

  .footer-btn-text {
    font-size: 28rpx;
    font-weight: 500;

    .cancel-btn & {
      color: #666;
    }

    .confirm-btn & {
      color: #fff;
    }
  }

  &:active {
    transform: scale(0.98);
  }
}

// 岗位选择弹窗
.position-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.position-list {
  flex: 1;
  padding: 0 32rpx;
}

.position-item {
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .position-text {
    font-size: 30rpx;
    color: #333;
  }
}

// 职位代码选择弹窗
.jobcode-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.jobcode-list {
  flex: 1;
  padding: 0 32rpx;
}

.jobcode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .jobcode-code {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
  }

  .jobcode-name {
    font-size: 28rpx;
    color: #666;
  }
}

// 图片上传样式
.image-upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 16rpx;
}

.image-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.uploaded-image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 32rpx;
  height: 32rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delete-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.add-image-btn {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.add-icon {
  font-size: 48rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.add-text {
  font-size: 24rpx;
  color: #999;
}

// 示例图片链接样式
.sample-image-link {
  margin-top: 16rpx;
  display: flex;
  justify-content: flex-start;
}

.sample-text {
  font-size: 28rpx;
  color: rgba(83, 157, 243, 1);
  text-decoration: underline;
}

// 承诺提示样式
.promise-tips {
  margin-bottom: 16rpx;
}

.promise-text {
  font-size: 28rpx;
  color: #FF5733;
  line-height: 1.4;
}
</style>
